<template>
  <div id="enterprise-application">
    <c-title text="需求发布"></c-title>
    <div class="top-title">发布信息</div>
    <div class="enterprise-company">
      <div class="category-pane">
        <van-field v-model="form.category_name" required label="分类" placeholder="请选择分类" readonly />
        <van-icon name="arrow" class="arrow-icon" @click="category_show = true" v-if="!type"/>
      </div>
      <van-field v-model="form.title" label="标题" placeholder="请输入标题" required v-if="!type"/>
      <div class="can-card" v-if="type">
        <div class="star-icon">*</div>
        <div class="can-top">
          <div class="can-name">标题</div>
          <div class="can-des">{{form.title}}</div>
        </div>
      </div>
      <van-field v-model="form.content" label="描述" placeholder="请输入描述" class="input-style" v-if="!type"/>
      <div class="can-card" v-if="type">
        <!-- <div class="star-icon">*</div> -->
        <div class="can-top">
          <div class="can-name" style="margin-right: 4.2rem;">描述</div>
          <div class="can-des">{{form.content}}</div>
        </div>
      </div>
      <div class="img-pane">
        <div class="img-name">图片</div>
        <yz_uploader v-model="fileList1" :max_count="1" :isCustomStyle="true" :styles="{ padding: '0' }" @inputimg="inputimg" v-if="type !== 'check' && is_show">
          <div class="upload-box"><van-icon name="plus" class="plus-icon" /></div>
        </yz_uploader>
        <img :src="fileList1[0]" alt="" v-if="fileList1[0] && type == 'check'" class="img-pic">
      </div>
    </div>
    <div class="top-title">{{type ? '套餐' : '选择套餐'}}</div>
    <div class="cost-pane">
      <div class="message-cost">
        <div class="top-des">
          <span class="once-fare">{{currentPackage.type_name ? currentPackage.type_name : currentPackage.name}}</span>
          <div class="change-sty" @click="goEnterprisePage " v-if="!type">
            <span>更换套餐</span>
            <van-icon name="arrow" class="arrow-icon-cost" />
          </div>
        </div>
        <div class="tip">{{currentPackage.desc}}</div>
      </div>
      <div class="top-cost">
        <div class="top-cost-title">
          <span>置顶费用</span>
          <van-checkbox v-model="form.is_headline" v-if="!type"></van-checkbox>
        </div>
        <div class="top-cost-tip">置顶收费¥{{headline_fee}}</div>
      </div>
    </div>
    <div class="bottom-submit" :class="[this.fun.getPhoneEnv() == 3 ? 'pcStyle' : '']">
      <span class="submit-name" @click="submit">{{type ? '查看订单' : '提交'}}</span>
    </div>

    <van-popup v-model="category_show" round position="bottom" :style="{ height: '13rem' }">
      <div class="category-box">
        <div class="top-name">
          <span class="cancal" @click="category_show = false">取消</span>
          <span class="middle">选择分类</span>
          <span class="sure" @click="sureOption">确认</span>
        </div>
        <div :class="item.ishow ? 'detail-box detail-active-color' : 'detail-box'" v-for="(item, index) in classifyData" :key="index" @click="chooseCategory(item.id)">
          <span>{{ item.title }}</span>
          <van-icon name="success" class="success-icon" v-if="item.ishow" />
        </div>
      </div>
    </van-popup>
    <meal-popup :meal_show.sync="meal_show" v-if="meal_show" @optionPackage="optionPackage" :currentPackage="currentPackage"></meal-popup>
  </div>
</template>
<script>
import demand_publish_controller from "./demand_publish_controller";

export default demand_publish_controller;
</script>
<style >
.imgUploader {
  background-color: white !important;
  padding: 0 !important;
}

.imgUploader .photoBox {
  width: 6.5rem !important;
  height: 6.5rem !important;
}

.imgUploader .van-uploader {
  width: 6.5rem !important;
  height: 6.5rem !important;
  background: white !important;
}

.imgUploader .photoBox i {
  top: -0.6rem !important;
  right: -0.6rem !important;
}
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
.pcStyle {
  width: 375px !important;
}

::v-deep .input-style .van-field__value {
  padding-left: 0.6rem;
}

#enterprise-application {
  padding-bottom: 5rem;

  .top-title {
    margin: 0.875rem 0 0.925rem 0.525rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #333;
    text-align: left;
  }

  .enterprise-company {
    background: white;
    padding: 1rem 0.65rem;

    .category-pane {
      position: relative;

      .arrow-icon {
        position: absolute;
        right: 0;
        top: 0.8rem;
      }
    }
  }

  .input-style {
    padding-left: 0.4rem;
  }

  .img-pane {
    text-align: left;
    padding: 0 0.4rem;
    margin: 0.75rem 0 1rem 0;

    .img-name {
      font-size: 0.8rem;
      font-weight: 400;
      color: #646566;
      margin-bottom: 0.75rem;
    }

    .upload-box-border {
      border: 0.05rem dotted #dbdbdb;
    }

    .img-pic {
      width: 100%;
      height: 100%;
      margin: 0;
      width: 6.5rem;
      height: 6.5rem;
    }

    .upload-box {
      width: 6.5rem;
      height: 6.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      // .plus-icon {
      //   font-size: 1.2rem;
      //   color: #999999;
      // }
    }
  }

  .category-box {
    padding: 0.8rem 0;
    height: 100%;

    .top-name {
      padding: 0 0.8rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.75rem;

      .cancal {
        font-size: 0.8rem;
        font-weight: 400;
        color: #999;
      }

      .middle {
        font-size: 0.9rem;
        font-weight: 400;
        color: #333;
      }

      .sure {
        font-size: 0.8rem;
        font-weight: 400;
        color: #333;
      }
    }

    .detail-active-color {
      color: #4978f8 !important;
      background: rgba(73, 120, 248, 0.2) !important;
    }

    .detail-box {
      font-size: 0.8rem;
      font-weight: bold;
      color: #333;
      margin: 0.3rem 0;
      display: flex;
      justify-content: space-between;
      padding: 0.25rem 0.8rem;
      align-items: center;

      .success-icon {
        font-size: 1.2rem;
      }
    }
  }

  .cost-pane {
    background: white;
    padding: 1rem 0.65rem;

    .message-cost {
      padding-bottom: 1rem;
      border-bottom: 0.025rem solid #ececec;
      margin-left: 0.5rem;

      .top-des {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .once-fare {
          font-size: 0.8rem;
          font-weight: 500;
          color: #333;
        }

        .change-sty {
          display: flex;
          justify-content: center;
          align-items: self-end;
          font-size: 0.65rem;
          font-weight: 500;
          color: #4978f8;

          .arrow-icon-cost {
            zoom: 0.9;
          }
        }
      }

      .tip {
        font-size: 0.65rem;
        font-weight: 400;
        color: #c2c2c2;
        text-align: left;
        margin-top: 0.425rem;
        line-height: 1;
      }
    }
  }

  .top-cost {
    margin-top: 1rem;
    margin-left: 0.5rem;

    .top-cost-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.8rem;
      font-weight: 500;
      color: #333;
    }

    .top-cost-tip {
      font-size: 0.65rem;
      font-weight: 400;
      color: #c2c2c2;
      margin-top: 0.3rem;
      text-align: left;
    }
  }

  .bottom-submit {
    background: white;
    width: 100%;
    position: fixed;
    bottom: 0;

    .submit-name {
      display: block;
      margin: 0.5rem 0.65rem;
      font-size: 0.75rem;
      font-weight: 400;
      color: white;
      background: #4978f8;
      padding: 0.65rem 0;
      border-radius: 1.025rem 1.025rem 1.025rem 1.025rem;
    }
  }
}

.can-card {
  display: flex;
  margin: 0.5rem 0.5rem;
  align-items: center;
}

.can-card .star-icon {
  vertical-align: super;
  color: #ee0a24;
}

.can-card .can-top {
  margin-left: 0.125rem;
  border-bottom: 0.025rem solid #ebedf0;
  display: flex;
  width: 100%;
  padding: 0.675rem 0;
}

.can-card .can-name {
  font-size: 0.8rem;
  color: #646566;
  margin-right: 3.8rem;
}

.can-card .can-des {
  width: 65%;
  white-space: nowrap;
  overflow-x: auto;
  text-align: left;
}
</style>
